<template>
	<view class="select-picker">
		<view class="header">
			<view class="line"></view>
		</view>
		<view class="content">
			<view class="title2" v-if="type == 1 && title.length">{{ title }}</view>
			<view class="title" v-if="type != 1 && title.length">
				<view class="title-item" v-for="(item, index) in title" :key="index">
					{{ item }}
					<text>{{ curList[index][value[index]] }}</text>
				</view>
			</view>
			<picker-view style="width: 100%; height: 340rpx;" :value="value" @change="bindChange">
				<picker-view-column v-for="(item, i) in curList" :key="i">
					<veiw :class="['select_item']" v-for="(item, index) in curList[i]" :key="index">
						{{ type === 1 ? item[keyVal] : item }}</veiw>
				</picker-view-column>
			</picker-view>
		</view>
		<view class="select-picker-bottom">
			<!-- {{ curList.length }} -->
			<view class="select-picker-save" @click="handleSave">确定</view>
		</view>
	</view>
</template>

<script>
import dayjs from 'dayjs';
export default {
	props: {
		// 传入数组
		list: {
			type: Array
		},
		type: {
			type: Number,
			default: 1
		},
		keyVal: {
			type: String,
			default: 'brandName'
		},
		title: {
			type: [String, Array],
			default: ()=>[]
		},
		active: {
			type: Array
		},
		dateType:{// 时间类型 1：年月 2：年月日 
			type: Number,
			default: 1
		},
	},
	data() {
		return {
			value: this.active,
			curList: [],
		};
	},
	watch: {
		active(newValue) {
			this.value = newValue;
		},
		list:{
			handler(newValue) {
				this.curList = newValue;
			},
			immediate: true 
		}
	},
	computed: {},
	created() {
		// console.log(this.list, 1125255211);
	},
	methods: {
		bindChange(e) {
			// 如果数组只有一项
			this.value = e.detail.value;
			if (this.dateType === 2) {
				let year = this.curList[0][this.value[0]];
				let month = this.curList[1][this.value[1]];
				let daysCount = dayjs(year + '-' + month).daysInMonth();
				let dayList = Array.from(new Array(daysCount + 1).keys()).slice(1);
				this.curList[2] = dayList;
			}
			console.log(e, 'e的值');
			if (this.dateType === 1) {
				this.$emit('bindChange', e.detail.value);
			}
		},
		handleSave() {
			// #ifdef H5
			if (!this.value) {
				this.value = [0];
			}
			// #endif
			setTimeout(() => {
				const a = this.value[0];
				if (this.curList.length === 1) {
					this.$emit('close', {
						index: this.value[0] || 0,
						type: 1
					});
				} else {
					console.log(this.value);
					this.$emit('close', this.value);
				}
				console.log('点击了保存',this.value);
			}, 600);
		}
	}
};
</script>
<style>
/* .active{
		color:#0091ff;
		width: 100%;
		height: 96rpx;
	} */
</style>
<style lang="scss" scoped>
.select_item {
	display: flex;
	justify-content: center;
	align-items: center;
	// color: #0091ff;
	// padding-bottom: 30rpx;
}

.select-picker {
	background: #ffffff;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
	position: relative;
	z-index: 30;

	.header {
    border-radius: 8rpx 8rpx 0rpx 0rpx;
		height: 67rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		//border-top: 2rpx solid #eeeeee;
		//border-bottom: 2rpx solid #eeeeee;

		.line {
			width: 64rpx;
			height: 10rpx;
			opacity: 1;
			background: #d8d8d8;
			border-radius: 6rpx;
		}
	}

	.content {
		.title {
			display: flex;
			// flex: 1;
			width: 100%;

			.title-item {
				font-size: 32rpx;
				display: flex;
				flex: 1;
				justify-content: center;
				padding: 36rpx 0 30rpx 0;
				color: #333333;
				font-weight: 500;

				text {
					margin-left: 24rpx;
				}
			}
		}

		.title2 {
			font-weight: bold;
			color: #333333;
			font-size: 32rpx;
			padding: 10rpx 30rpx;
		}
	}

	.select-picker-bottom {
		padding: 30rpx 40rpx;

		.select-picker-save {
			display: flex;
			color: #fff;
			font-weight: 500;
			height: 70rpx;
			background: #0091ff;
			border-radius: 8rpx;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
